﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />


<!DOCTYPE html>
<html lang="zh-CN">
<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>

</head>

<body class="ihg-theme-draft">

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <jsp:include page="/WEB-INF/include/submenu-ordinary-user.jsp">
    <jsp:param name="currentUrl" value="${ctx.host}/sessions/${session.id}" />
  </jsp:include>

  <div class="container-fluid ihg-container has-ihg-sidemenu">

    <div class="ihg-breadcrumb">
      <ol class="breadcrumb border-breadcrumb">
        <li class="active">My Development Journey</li>
      </ol>
    </div>

    <div class="row">
      <div class="clearfix">
        <div class="col-xs-8">
          <div style="width: 100%; margin-left: 10px;">
            <p style="font-weight: bold; color: #666; font-size: 20px;">Instruction</p>
            <ul class="list-unstyled instruction-list">
              <li>Please write your coaching<samll style="font-size: 14px;">(<fmt:formatDate value="${coachStartDate}" pattern="yyyy-MM-dd"/>-<fmt:formatDate value="${coachEndDate}" pattern="yyyy-MM-dd"/>)</samll> plan based on your take-away of the development center as well as your initial conversation with your coach.</li>
              <li>Make sure to upload your coaching plan before <span style="color: #c00000;">your first coaching session</span>&nbsp;<br>
              <a href="${delegateAttributes['coachingPlan'].value}" style="color: #666; text-decoration: underline;">Download coaching plan template</a></li>
            </ul>
          </div>
        </div>
        <div class="col-xs-4">
          <div class="pull-left" style="width: 200px;">
            <div class="certification-layout clearfix" style="margin-top: 12px;">
              <div class="item-wrap">
                <a href="${sessionReport.delegateFinalReport}" class="certification-item" style="width: 176px; height: 176px; line-height: 1.2; font-size: 15px; "> <span class="iconfont icon-baogao" aria-hidden="true" style="font-size: 60px;"></span>
                  <p class="no-margin" style="line-height: 36px;">My personal reports</p>
                  <button type="button" class="btn certification-btn" style="margin-top: 10px;">View</button>
                </a>
              </div>
            </div>
          </div>
          <c:choose>
            <c:when test="${empty delegateAttributes or empty delegateAttributes['coaching-plan']}">
              <%-- <div class="pull-left" style="width: 200px;">
                <div class="certification-layout clearfix" style="margin-top: 12px;">
                  <div class="item-wrap">
                    <a href="${ctx.host}/sessions/${session.id}/upload-coaching-plan" class="certification-item color-danger" 
                        style="width: 176px; height: 176px; line-height: 1.2; font-size: 15px; background-color: #e2e2e2;"> 
                        <span class="glyphicon glyphicon-plus" aria-hidden="true" style="font-size: 60px; line-height: 150px;"></span>
                    </a>
                  </div>
                </div>
              </div> --%>
              <div class="pull-left" style="width: 200px;">
                <div class="certification-layout clearfix" style="margin-top: 12px;">
                  <div class="item-wrap">
                    <a href="${ctx.host}/sessions/${session.id}/upload-coaching-plan" class="certification-item color-danger" data-target="#upload" data-toggle="modal" style="width: 176px; height: 176px; line-height: 1.2; font-size: 15px; background-color: #dea948;"> <span class="iconfont icon-baogao" aria-hidden="true" style="font-size: 60px;"></span>
                      <p class="no-margin" >My Coaching Plan drafted by delegate</p>
                      <button type="button" class="btn certification-btn" style="margin-top: 10px;">add</button>
                    </a>
                  </div>
                </div>
              </div>
            </c:when>
            <c:otherwise>
              <div class="pull-left" style="width: 200px;">
                <div class="certification-layout clearfix" style="margin-top: 12px;">
                  <div class="item-wrap">
                    <a href="${delegateAttributes['coaching-plan'].value}" class="certification-item color-danger" style="width: 176px; height: 176px; line-height: 1.2; font-size: 15px; background-color: #dea948;"> <span class="iconfont icon-baogao" aria-hidden="true" style="font-size: 60px;"></span>
                      <p class="no-margin" >My Coaching Plan drafted by delegate</p>
                      <button type="button" class="btn certification-btn" style="margin-top: 10px;">View</button>
                    </a>
                  </div>
                </div>
              </div>
            </c:otherwise>
          </c:choose>
          
        </div>
      </div>
      <!-- <div class="row">
        <div class="col-xs-4 col-xs-offset-8">
          <i class="glyphicon glyphicon-plus" style="font-size: 40px; color: #d96932;"></i>
        </div>
      </div> -->
      <div class="" style="margin-top: 30px; border-bottom: 1px solid #ddd;">
        <p class="color-orange text-center" style="font-size: 18px; margin-bottom: 0;" >Coaching Date</p>
        <p class="text-center" style="font-size: 15px; margin-bottom: 5px;"><fmt:formatDate value="${coachStartDate}" pattern="yyyy-MM-dd"/>-<fmt:formatDate value="${coachEndDate}" pattern="yyyy-MM-dd"/></p>
      </div>
      <div class="col-xs-12" style="margin-top: 20px; ">
        <p style="font-weight: bold; color: #666; font-size: 20px;">Instruction</p>
        <ul class="list-unstyled instruction-list">
          <li>Please submit your coaching conversation notes within 2 weeks after each coaching session, and have your coach’s confirmation.</li>
          <li>Please make sure you have at least 6 coaching conversations a year.</li>
        </ul>
      </div>
      
      <div class="col-xs-12">
        <div class="ihg-content-layout">
          <div class="ihg-form-title clearfix">
            <h5 style="font-size: 20px;">My Coaching Conversation List</h5>
          </div>

          <c:if test="${not empty conversations}">
            <table class="table table-striped ihg-table tab-pane" style="margin-top: 15px;">
              <thead>
                <tr>
                  <th>CONVERSATION</th>
                  <th>CONVERSATION DATE</th>
                  <th>UPDATE TIME</th>
                  <th>OPT</th>
                  <th>COACH STATUS</th>
                </tr>
              </thead>
              <tbody>
                <c:forEach var="conversation" items="${conversations}">
                  <tr>
                    <td>${conversation.theme}</td>
                    <td><fmt:formatDate value="${conversation.conversationDate}" pattern="yyyy/MM/dd"/></td>
                    <td><fmt:formatDate value="${conversation.lastUpdateTime}" pattern="yyyy/MM/dd HH:mm"/></td>
                    <td>
                      <a href="${ctx.host}/sessions/${session.id}/development-journey/coching-conversations/${conversation.id}/edit" data-target="#conversation-edit" data-toggle="modal"><label class="label label-primary">EDIT</label></a>
                      <a href="${ctx.host}/sessions/${session.id}/development-journey/coching-conversations/${conversation.id}/delete" data-target="#conversation-delete" data-toggle="modal"><label class="label label-danger">DELETE</label></a>
                      <a href="${ctx.host}/sessions/${session.id}/development-journey/coching-conversations/${conversation.id}/submit" data-target="#conversation-submit" data-toggle="modal"><label class="label label-warning">SUBMIT</label></a>
                    </td>
                    <td>
                        <label class="label label-${conversation.status.notSubmited ? 'default' : conversation.status.confirmed ? 'success' : 'danger'}" style="display: block; margin: 0 auto; width: 170px;">${conversation.status}</label>
                    </td>
                  </tr>
                </c:forEach>
              </tbody>
            </table>
          </c:if>
          <a href="${ctx.host}/sessions/${session.id}/development-journey/coching-conversations/create" class="btn btn-success" data-target="#conversation-create" data-toggle="modal">Add New Coaching Conversation</a>
        </div>

      </div>
    </div>

  </div>
  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/session/after/development-journey.js" />
  <script type="text/javascript">
    require([ 'page/session/after/development-journey' ], function(page) {
      page.init();
    })
  </script>
</body>

</html>
